<template>
  <div class="app-container">
    <!--查询条件开始-->
    <el-row :gutter="20" style="margin-bottom:5px">
        <el-col :span="24">
          <el-card class="box-card">
            <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
                  
                  <el-form-item style="float:right">
                      <el-button type="primary" icon="el-icon-plus" size="small" @click="upWeek()">上一周</el-button>
                      <el-button type="success" icon="el-icon-s-operation" size="small" @click="currentWeek()">当前周</el-button>
                      <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek()">下一周</el-button>
                   </el-form-item>

              </el-form>

          </el-card>
        </el-col>
    </el-row>
    <!--查询条件结束-->
    <!--时间范围开始-->
     <el-row :gutter="20" style="margin-bottom:5px">
        <el-col :span="24">
          <el-card class="box-card" style="text-align:center">
              {{this.schedulingData.startTimeThisWeek}}(周一)-{{this.schedulingData.endTimeThisWeek}}{周日}
          </el-card>
        </el-col>
    </el-row>
    <!--时间结束开始-->
    <!--数据表格开始-->
     <el-row :gutter="20" style="margin-bottom:5px">
        <el-col :span="24">
          <el-card class="box-card" style="text-align:center">
              <el-table v-loading="loading" :data="tableData" border :span-method="spanMethod" >
                  <el-table-column label="医生" prop="userId" align="center" :formatter="userFormat" />
                  <el-table-column label="部门" prop="deptId" align="center" :formatter="deptFormat" />
                  <el-table-column label="时间/日期" prop="subsectionType" align="center" :formatter="subsectionTypeFormat"  />
                  <el-table-column :label="labelNames[0]" prop="schedulingType[0]" align="center" :formatter="schedulingTypeDay1Formatter" />
                  <el-table-column :label="labelNames[1]" prop="schedulingType[1]" align="center" :formatter="schedulingTypeDay2Formatter" />
                  <el-table-column :label="labelNames[2]" prop="schedulingType[2]" align="center" :formatter="schedulingTypeDay3Formatter" />
                  <el-table-column :label="labelNames[3]" prop="schedulingType[3]" align="center" :formatter="schedulingTypeDay4Formatter" />
                  <el-table-column :label="labelNames[4]" prop="schedulingType[4]" align="center" :formatter="schedulingTypeDay5Formatter" />
                  <el-table-column :label="labelNames[5]" prop="schedulingType[5]" align="center" :formatter="schedulingTypeDay6Formatter" />
                  <el-table-column :label="labelNames[6]" prop="schedulingType[6]" align="center" :formatter="schedulingTypeDay7Formatter" />
              </el-table>
          </el-card>
        </el-col>
    </el-row>
    <!--数据表格结束-->
    
    
  </div>
</template>
<script>
import {queryUsersNeedScheduling} from '@/api/system/user'  //最后替换为需要排版的医生
import {selectAllDept} from '@/api/system/dept'
import {queryMyScheduling} from '@/api/doctor/scheduling'
export default {
  data() {
      return {
        weekflag:false,
        open:false,
        title:'',
        loading:false,
        tableData: [],
      editTableData:[],
      schedulingData: {},
      labelNames: ['', '', '', '', '', '', ''],
      queryParams:{},
      //医生数据
      userOptions:[],
      //部门部门数据
      deptOptions:[],
      //排班类型数据值集
      schedulingTypeOptions:[],
      //排班时段数据值集,
      subsectionTypeOptions:[],

      }
  },created(){
    
    //初始化医生数据
    queryUsersNeedScheduling(this.queryParams.deptId,this.queryParams.userId).then(res =>{  
      this.userOptions = res.data
    })
    //初始化部门部门数据
    selectAllDept().then(res =>{
      this.deptOptions = res.data
    }),
    //初始化排班类型数据值集
    this.getDataByType("his_scheduling_type").then(res =>{
      this.schedulingTypeOptions = res.data
    })
    //初始化时间数据值集  
    this.getDataByType("his_subsection_type").then(res =>{
      this.subsectionTypeOptions = res.data
    })
    this.listScheduling()
  },methods:{
    listScheduling() {
      this.loading = true
      // 调用API
      queryMyScheduling(this.queryParams).then(res => {
        this.labelNames = res.data.labelNames
        this.tableData = res.data.tableData
        this.schedulingData = res.data.schedulingData
        this.loading = false
      })
    },
    
   
   
     // 上一周
    upWeek() {
      this.queryParams.queryDate = this.schedulingData.startTimeThisWeek
      this.listScheduling()
      // weekflag = false
    },
    // 当前周
    currentWeek() {
      this.queryParams.queryDate = undefined
      this.listScheduling()
    },
    // 下一周
    nextWeek() {
      this.queryParams.queryDate = this.schedulingData.endTimeThisWeek
      this.listScheduling()
    },

    //翻译时间
    subsectionTypeFormat(row){
        return  this.selectDictLabel(this.subsectionTypeOptions,row.subsectionType)  
    },
    //翻译排版类型
    schedulingTypeDay1Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[0])  
    },
     schedulingTypeDay2Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[1])  
    },
     schedulingTypeDay3Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[2])  
    },
     schedulingTypeDay4Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[3])  
    },
     schedulingTypeDay5Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[4])  
    },
     schedulingTypeDay6Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[5])  
    },
     schedulingTypeDay7Formatter(row){
      return this.selectDictLabel(this.schedulingTypeOptions,row.schedulingType[6])  
    },
    //翻译部门
    deptFormat(row){
      let name =''
      this.deptOptions.map(item =>{
        if(item.deptId === row.deptId){
          name = item.deptName
        }
      })
      return name
    },
    userFormat(row){
       let name =''
      this.userOptions.map(item =>{
        if(item.userId === row.userId){
          name = item.userName
        }
      })
      return name
    },
     spanMethod(data) { // 对于表格数据进行分组合并操作，UI组件回调函数
      // const { row, column, rowIndex, columnIndex } = data
      const { row, rowIndex, columnIndex } = data
      if (columnIndex < 2 || columnIndex > 9) { // 医生合并展示区
        const len = this.userGroup(row.userId)
        const lenName = this.userIdLen(row.userId)
        if (rowIndex === lenName) { // 某医生首位部门行
          return {
            rowspan: len,
            colspan: 1
          }
        } else {
          return { // 某医生非首位部门行
            rowspan: 0,
            colspan: 0
          }
        }
      } else { // 排班信息展示区
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    userGroup(name) { // 根据医生名称获取医生数量
      return this.tableData.filter(o => o.userId === name).length
    },
    userIdLen(name) { // 根据医生名称获取该医生第一个部门在全量部门中的偏移位置
      const tmp = Array.from(this.groupNum)
      const index = tmp.indexOf(name) // 某医生在全医生中的偏移位置
      let len = 0
      for (let i = 0; i < index; i++) {
        len += this.userGroup(tmp[i])
      }
      return len
    },


  
    

  },watch:{

  },
  computed: {
    groupNum() { // 获取医生列表数组
      return new Set(this.tableData.map(o => o.userId))
    }
  },
 
  

}
</script>
